<template>
  <view class="withdraw-form">
    <view class="form-item">
      <text class="label">提现金额</text>
      <view class="input-wrap">
        <text class="currency">¥</text>
        <input 
          type="digit" 
          v-model="amount" 
          placeholder="请输入提现金额"
          class="amount-input"
        />
      </view>
    </view>
    
    <view class="form-item">
      <text class="label">提现方式</text>
      <view class="method-list">
        <view 
          class="method-item" 
          v-for="(item, index) in withdrawMethods" 
          :key="index"
          :class="{ active: currentMethod === item.value }"
          @tap="selectMethod(item.value)"
        >
          <image :src="item.icon" mode="aspectFit" class="method-icon"></image>
          <text class="method-name">{{item.name}}</text>
          <text class="method-desc">{{item.desc}}</text>
          <text class="check-icon" v-if="currentMethod === item.value">✓</text>
        </view>
      </view>
    </view>
    
    <view class="form-item" v-if="currentMethod === 'alipay'">
      <text class="label">支付宝账号</text>
      <input 
        type="text" 
        v-model="alipayAccount" 
        placeholder="请输入支付宝账号"
        class="account-input"
      />
    </view>
    <view class="form-item" v-if="currentMethod === 'wechat'">
      <text class="label">微信账号</text>
      <input 
        type="text" 
        v-model="wechatAccount" 
        placeholder="请输入微信账号"
        class="account-input"
      />
    </view>
    <view class="form-item" v-if="currentMethod === 'bank'">
      <text class="label">开户银行</text>
      <picker 
        mode="selector" 
        :range="bankList" 
        @change="selectBank"
      >
        <view class="picker-wrap">
          <text>{{selectedBank || '请选择开户银行'}}</text>
          <text class="arrow">></text>
        </view>
      </picker>
    </view>
    <view class="form-item" v-if="currentMethod === 'bank'">
      <text class="label">银行卡号</text>
      <input 
        type="number" 
        v-model="bankCard" 
        placeholder="请输入银行卡号"
        class="account-input"
      />
    </view>
    <view class="form-item" v-if="currentMethod === 'bank'">
      <text class="label">开户人姓名</text>
      <input 
        type="text" 
        v-model="bankHolder" 
        placeholder="请输入开户人姓名"
        class="account-input"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { WITHDRAW_METHODS, WITHDRAW_METHOD_NAMES, WITHDRAW_METHOD_ICONS, WITHDRAW_METHOD_DESCS, WITHDRAW_LIMITS } from '@/constants/distribution'

const props = defineProps({
  availableAmount: {
    type: [String, Number],
    required: true
  }
})

const emit = defineEmits(['submit'])

// 提现金额
const amount = ref('')

// 提现方式
const withdrawMethods = computed(() => {
  return Object.values(WITHDRAW_METHODS).map(method => ({
    value: method,
    name: WITHDRAW_METHOD_NAMES[method],
    icon: WITHDRAW_METHOD_ICONS[method],
    desc: WITHDRAW_METHOD_DESCS[method]
  }))
})

// 当前选择的提现方式
const currentMethod = ref(WITHDRAW_METHODS.ALIPAY)

// 支付宝账号
const alipayAccount = ref('')

// 微信账号
const wechatAccount = ref('')

// 银行列表
const bankList = [
  '中国工商银行',
  '中国农业银行',
  '中国建设银行',
  '中国银行',
  '交通银行',
  '招商银行',
  '浦发银行',
  '中信银行',
  '民生银行',
  '光大银行'
]

// 选中的银行
const selectedBank = ref('')

// 银行卡号
const bankCard = ref('')

// 开户人姓名
const bankHolder = ref('')

// 表单验证
const isValid = computed(() => {
  if (!amount.value || parseFloat(amount.value) < WITHDRAW_LIMITS.MIN_AMOUNT) return false
  
  switch (currentMethod.value) {
    case WITHDRAW_METHODS.ALIPAY:
      return !!alipayAccount.value
    case WITHDRAW_METHODS.WECHAT:
      return !!wechatAccount.value
    case WITHDRAW_METHODS.BANK:
      return !!selectedBank.value && !!bankCard.value && !!bankHolder.value
    default:
      return false
  }
})

// 选择提现方式
const selectMethod = (method) => {
  currentMethod.value = method
}

// 选择银行
const selectBank = (e) => {
  selectedBank.value = bankList[e.detail.value]
}

// 提交表单
const submitForm = () => {
  if (!isValid.value) return
  
  const formData = {
    amount: parseFloat(amount.value),
    method: currentMethod.value,
    account: currentMethod.value === WITHDRAW_METHODS.ALIPAY ? alipayAccount.value :
             currentMethod.value === WITHDRAW_METHODS.WECHAT ? wechatAccount.value : null,
    bank: currentMethod.value === WITHDRAW_METHODS.BANK ? {
      name: selectedBank.value,
      card: bankCard.value,
      holder: bankHolder.value
    } : null
  }
  
  emit('submit', formData)
}

// 暴露方法给父组件
defineExpose({
  submitForm
})
</script>

<style lang="scss">
.withdraw-form {
  margin: 20rpx;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 30rpx;
  
  .form-item {
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      display: block;
    }
    
    .input-wrap {
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #EEEEEE;
      padding-bottom: 10rpx;
      
      .currency {
        font-size: 36rpx;
        color: #333;
        margin-right: 10rpx;
      }
      
      .amount-input {
        flex: 1;
        font-size: 36rpx;
        color: #333;
      }
    }
    
    .account-input {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #333;
      border-bottom: 1rpx solid #EEEEEE;
    }
    
    .picker-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #333;
      border-bottom: 1rpx solid #EEEEEE;
      
      .arrow {
        color: #999;
      }
    }
  }
  
  .method-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .method-item {
      display: flex;
      align-items: center;
      padding: 20rpx;
      background-color: #F5F5F5;
      border-radius: 8rpx;
      position: relative;
      
      &.active {
        background-color: #FFF5F5;
        border: 2rpx solid #D02B29;
      }
      
      .method-icon {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
      }
      
      .method-name {
        font-size: 28rpx;
        color: #333;
        margin-right: 20rpx;
      }
      
      .method-desc {
        font-size: 24rpx;
        color: #999;
      }
      
      .check-icon {
        position: absolute;
        right: 20rpx;
        color: #D02B29;
        font-size: 32rpx;
      }
    }
  }
}
</style> 